(function($) {
    var defaults = {
        basemap: null,
        graphiclayer: null,
        baselayer: null,
        width: 300,
        height: 200,
        bottom: 0,
        left: 0,
        position: 'absolute',
        id: 'overview_map',
        tip: true,
        ifmove: false
    };
    //��չ
    $.fn.extend({
        //�������
        startViewMap: function(options) {
            //����Ĭ�ϲ���
            var opts = $.extend(defaults, options);
            //����html�ĵ�
            function createDom() {
                var id = opts.map.id;
                var overviewid = 'overview_' + id;
                opts.id = overviewid;
                var arrowid = 'overviewarrow_' + id;
                var html = "<div id='" + overviewid + "'></div>";
                html += '<div id="' + arrowid + '" style="position: absolute; bottom: 0; left: 0; z-index: 99; width: 20px; height: 20px;">' +
                    '<img src='+window.location.origin+'"css/show.png" style="width: 20px; height: 20px;cursor: pointer">' +
                    '</div>';
                $('#' + id).after(html);
                $('#' + overviewid).css('position', opts.position);
                $('#' + overviewid).css('bottom', opts.bottom);
                $('#' + overviewid).css('left', opts.left);
                $('#' + overviewid).css('width', opts.map.width / 6);
                $('#' + overviewid).css('height', opts.map.height / 6);
                $('#' + overviewid).css('border', "2px solid #dedede");
                $('#' + overviewid).css('background-color', "#dedede");
                $('#' + arrowid).on('click', function() {
                    if ($("#" + overviewid).css('display') == 'block') {
                        $("#" + overviewid).hide();
                        $('#' + arrowid + ' img').attr('src', window.location.origin+'css/hide.png');
                    } else {
                        $("#" + overviewid).show();
                        $('#' + arrowid + ' img').attr('src', window.location.origin+'css/show.png');
                    }
                });
            }
            //������
            return this.each(function() {
                createDom();
                require(["esri/map", "esri/graphic", "esri/layers/GraphicsLayer", "esri/graphicsUtils"],
                    function(Map, Graphic, GraphicsLayer, graphicsUtils) {
                        opts.basemap = new Map(opts.id, {
                            center: [104, 30],
                            zoom: 5,
                            slider: false,
                            logo: false
                        });
                        opts.basemap.addLayer(opts.baselayer);
                        opts.basemap.disableDoubleClickZoom();
                        opts.basemap.disableRubberBandZoom();
                        opts.basemap.disableScrollWheelZoom();
                        opts.basemap.disableShiftDoubleClickZoom();
                        opts.graphiclayer = new GraphicsLayer();
                        opts.basemap.addLayer(opts.graphiclayer);

                        function setOverViewMapExtent() {
                            if (opts.tip) {
                                opts.graphiclayer.clear();
                                var geometry = new Graphic();
                                geometry.geometry = opts.map.extent;
                                geometry.symbol = new esri.symbol.SimpleFillSymbol();
                                opts.graphiclayer.add(geometry);
                                if (opts.graphiclayer.graphics) {
                                    var myExtent = graphicsUtils.graphicsExtent(opts.graphiclayer.graphics);
                                    opts.basemap.setExtent(myExtent.expand(2));
                                }
                            }
                            opts.tip = true;
                        }
                        setOverViewMapExtent();
                        opts.map.on('extent-change', function() {
                            setOverViewMapExtent();
                        });

                        function addMoveGraphic(evt) {
                            opts.tip = false;
                            var polygon = opts.graphiclayer.graphics[0].geometry;
                            var extent = new esri.geometry.Extent(polygon);
                            var point = extent.getCenter();
                            var width = evt.mapPoint.x - point.x;
                            var height = evt.mapPoint.y - point.y;
                            var xmin = extent.xmin + width;
                            var xmax = extent.xmax + width;
                            var ymin = extent.ymin + height;
                            var ymax = extent.ymax + height;
                            var geo = new esri.geometry.Extent(xmin, ymin, xmax, ymax, opts.basemap.spatialReference);
                            opts.graphiclayer.clear();
                            var graphic = new Graphic();
                            graphic.geometry = geo;
                            graphic.symbol = new esri.symbol.SimpleFillSymbol();
                            opts.graphiclayer.add(graphic);
                            opts.basemap.centerAt(point);
                            opts.map.centerAt(point);
                        }
                        opts.graphiclayer.on("mouse-over", function() {
                            if (opts.ifmove) {
                                opts.basemap.disablePan();
                            } else {
                                opts.ifmove = true;
                                opts.basemap.disablePan();
                            }
                        });
                        opts.graphiclayer.on("mouse-out", function() {
                            if (opts.ifmove) {
                                opts.ifmove = false;
                                opts.basemap.enablePan();
                            }
                        });
                        opts.basemap.on("mouse-drag", function(evt) {
                            if (opts.ifmove) {
                                addMoveGraphic(evt);
                            }
                        });
                        opts.basemap.on("click", function(evt) {
                            addMoveGraphic(evt);
                        });
                        opts.basemap.on("mouse-drag-end", function(evt) {
                            if (opts.ifmove) {
                                addMoveGraphic(evt);
                            }
                        });
                    });
            });
        }
    });
})(jQuery);